<template>
    <div id="home">
        <van-search placeholder="请输入搜索关键词" class="home-search" v-model="value"/>
        <div v-for="(v,i) in carList" :key="i">
            <div class="bgc">
                <div style="display:flex;justify-content: space-between;">
                    <p style="color:#2d8cf0">{{v.parking_place_number}}</p>
                    <p>{{v.is_appoint === 1 ?'可预约':'不可预约'}}</p>
                </div>
                <p>充电桩：{{v.is_charging === 1 ?'有':'无'}}</p>
                <p>车辆类型：{{v.car_type  === 0 ? "小车" : "大车"}}</p>
                <p>取消预约费用：{{user.cancleMoney}}</p>
                <p style="color:red">车位情况：{{v.status === 0 ?'空闲':'占用'}}</p>
                <div style="display:flex;justify-content: space-between;margin-top:15px">
                    <span>入场时间：{{v.tiem1}}</span>
                    <span  style="color:#2d8cf0" @click="show1 = true,idx = i">选择入场时间</span>
                </div>
                <div style="display:flex;justify-content: space-between;margin-top:15px;padding-bottom:15px">
                    <span>出场时间：{{v.tiem2}}</span>
                    <span style="color:#2d8cf0" @click="chuchang(i)">选择出场时间</span>
                </div>
                <div style="display:flex;justify-content: space-between;margin-top:15px;padding-bottom:15px">
                    <span>选择车辆：{{v.number}}</span>
                    <span style="color:#2d8cf0" @click="cheliang">选择车辆</span>
                </div>
                <div class="btn">
                    <van-button type="primary" :disabled="v.status !== 0 || v.is_appoint === 0" size="small" @click="ok(v)">去停车</van-button>
                </div>
            </div>
        </div>
        <van-popup v-model="show" position="bottom" class="popup" close-on-click-overlay>
            <van-cell-group>
                <van-field v-model="money" placeholder="支付数值" disabled/>
                <van-radio-group v-model="radio">
                <span>支付方式：</span>
                    <van-radio name="余额">余额</van-radio>
                    <!-- <van-radio name="微信">微信</van-radio>
                    <van-radio name="支付宝">支付宝</van-radio> -->
                </van-radio-group>
                <van-button type="primary" size="large" @click="payment">确认支付</van-button>
            </van-cell-group>
        </van-popup>
        <van-popup v-model="show1" position="bottom" class="popup" close-on-click-overlay>
            <van-datetime-picker
                v-model="inTime"
                type="time"
                title="选择入场时间"
                @confirm="val => getInTime(val,1)"
                @cancel="show1 = false"
                :min-hour="ru1"
                :max-hour="ru2"
                :min-minute="ru3"
                :max-minute="ru4"
            />
        </van-popup>
        <van-popup v-model="show2" position="bottom" class="popup" close-on-click-overlay>
            <van-datetime-picker
                v-model="outTime"
                @confirm="val => getInTime(val,2)"
                type="time"
                :min-minute="chu3"
                :max-minute="chu4"
                title="选择出场时间"
                :min-hour="chu1"
                @cancel="show2 = false"
                :max-hour="chu2"
            />
        </van-popup>
        <van-popup v-model="show3" position="bottom" class="popup" close-on-click-overlay>
            <div class="list-box">
                <div v-for="item in list" :key="item.car_id" :class="item.status ? 'box' : 'box1'" @click="selectCar(item)">
                    <div class="flex-sp-center">
                        <span :class="item.car_type === 'BLUE' ? 'number' : item.car_type === 'YELLOW' ? 'yellow' :'green'">{{item.car_number}}</span>
                        <span :class="item.black_id ? 'red' : 'ok'">{{item.status === 0 ? '不可使用' : '可使用'}}</span>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import {
  Toast,
} from "vant";
import { ref } from 'vue';
export default {
    setup() {
        const currentTime = ref('12:00');
        return { currentTime };
    },
    components: {
        [Toast.name]: Toast,
    },
    data() { 
        return{ 
            carList: [],
            show: false,
            show3: false,
            money: 0,
            radio: '余额',
            value: '',
            user: {},
            id: '',
            userMoney: 0,
            info: {},
            show1: false,
            inTime: '',
            outTime: '',
            show2: false,
            time1: '',
            time2: '',
            ru1: 0,
            ru2: 0,
            ru3: 0,
            ru4: 0,
            chu1: 0,
            chu2: 0,
            chu3: 0,
            chu4: 0,
            number: '',
            list: [],
            carInfo: {},
            idx: 0,
            idx1: 0,
            carIdx: {},
        }
    },
    methods: { 
        async getCar(id) { 
            try{ 
                const { data : res } = await this.$api.Parking.getSpaceList({ 
                    area_id: id
                })
                if (res.code) return this.$message.error(res.msg);
                this.carList = res.result
                for(let val of this.carList) { 
                    this.$set(val,'tiem1','')
                    this.$set(val,'tiem2','')
                    this.$set(val,'number','')
                }
            }catch(e) { 
                console.log(e);
            }
        },
        async updateSpaceStatus() { 
            try{ 
                const { data : res } = await this.$api.Parking.updateSpaceStatus({
                    status: 1,
                    space_id: this.carIdx.space_id
                })
                if(res.code) return Toast(res.msg)
            }catch(e) { 
                console.log(e);
            } 
        },
        async updateCarStatus() { 
            try{ 
                const { data : res } = await this.$api.Parking.updateCarStatus({
                    status: 3,
                    car_id: this.carInfo.car_id
                })
                if(res.code) return Toast(res.msg)
            }catch(e) { 
                console.log(e);
            } 
        },
        async payment() { 
            if(this.userMoney < this.money) return Toast('金额不足请前往钱包充值')
            try{ 
                this.updateSpaceStatus()
                this.updateCarStatus()
                const { number, parking_place_number, tiem2, tiem1} = this.carIdx
                const { data : res } = await this.$api.User.userPark({ 
                    id: this.id,
                    money: this.money
                })
                if(res.code) return Toast(res.msg)
                Toast({
                    message: '预约成功',
                    duration: 1000,
                    overlay: true
                })
                this.createOrder({number,parking_place_number,tiem2,tiem1})
                setTimeout(() => { 
                    this.show = false
                    this.$router.push('/home')
                },2000)
            }catch(e){
                console.log(e);
            }
        },
        gettime(t) {
            var _time = new Date(t);
            var year = _time.getFullYear();
            var month = _time.getMonth() + 1;
            var date = _time.getDate();
            var hour = _time.getHours();
            var minute = _time.getMinutes();
            var second = _time.getSeconds();
            return (
                year +
                "-" +
                month +
                "-" +
                date +
                " " +
                hour +
                ":" +
                minute +
                ":" +
                second
            ); //这里自己按自己需要的格式拼接
        },
        async createOrder(obj) { 
            try{ 
                const { 
                    number,
                    parking_place_number,
                    tiem1,
                    tiem2
                } = obj
                const { 
                    name, 
                    parking_lot_address, 
                    parking_lot_name, 
                    appoint_price,
                    moreMoney,
                    hourMoney
                } = this.user
                const { data : res } = await this.$api.Order.createOrder({ 
                    userId: localStorage.userid,
                    userName: localStorage.name,
                    parking_lot_address,
                    parking_lot_name,
                    appoint_price,
                    inTime: tiem1,
                    outTime: tiem2,
                    areaName: name,
                    createTime: new Date(),
                    phone: localStorage.phone,
                    car_number: number,
                    car_place: parking_place_number,
                    moreMoney,
                    hourMoney,
                    space_id: this.carIdx.space_id,
                    car_id: this.carInfo.car_id,
                    cancleMoney: this.user.cancleMoney
                })
                if(res.code) return Toast(res.msg)
            }catch(e){
                console.log(e);
            }
        },
        async getInfo() { 
            try{
                const { data : res } = await this.$api.User.getUserInfo({ 
                    id: this.id
                })
                if(res.code) return false 
                this.userMoney = res.result[0].money
            }catch(e){ 
                console.log(e);
            }
        },
        getInTime(val,type) { 
            if(type === 2) { 
                let inTime1 = parseInt(this.inTime.split(':')[0])
                let inTime2 = parseInt(this.inTime.split(':')[1])
                let outTime1 = parseInt(val.split(':')[0])
                let outTime2 = parseInt(val.split(':')[1])
                if(inTime1 === outTime1 && inTime2 >= outTime2)  { 
                    Toast('出场时间必须大于入场时间')
                    // this.$set(this,'outTime','')
                }
                // else if(inTime1 > outTime1) { 
                //     Toast('出场时间必须大于入场时间')
                //     this.$set(this.carList[this.idx],'tiem2','')
                // }
                else{ 
                    this.$set(this.carList[this.idx],'tiem2',val)
                }
                this.show2 = false
            }else{ 
                this.$set(this.carList[this.idx],'tiem1',val)
                this.show1 = false
            }            
        },
        chuchang(i) { 
            if(!this.inTime) return Toast('请先选择入场时间')
            this.show2 = true
            this.idx1 = i
        },
        formateDate() { 
            let { business_begin_time, business_end_time} = this.user
            this.ru1 = Number(business_begin_time.split(':')[0])
            this.ru2 = Number(business_end_time.split(':')[0])
            this.ru3 = Number(business_begin_time.split(':')[1])
            this.ru4 = Number(business_end_time.split(':')[1])
            this.chu1 = Number(business_begin_time.split(':')[0])
            this.chu2 = Number(business_end_time.split(':')[0])
            this.chu3 = Number(business_begin_time.split(':')[1])
            this.chu4 = Number(business_end_time.split(':')[1])
        },
        async ok(val) { 
            const { number, tiem1, tiem2 } = val
            if(!tiem1) return Toast('请选择入场时间')
            if(!tiem2)return Toast('请选择出场时间')
            if(!number) return Toast('请选择车辆')
            const { car_type } = val
            const { car_type1 } = this.carInfo
            if(car_type === 0 && car_type1 !== 'small') return Toast('该车位仅停放小车类型,请重新选择车辆')
            if(car_type === 1 && car_type1 !== 'big') return Toast('该车位仅停放大车类型,请重新选择车辆')
            this.carIdx = val
            this.show = true
        },
        selectCar(data) { 
            if(!data.status) return Toast('该车辆已被拉入黑名单无法使用')
            if(data.status === 3) return Toast('该车辆尚未离场')
            this.carInfo = data
            this.show3 = false
            this.$set(this.carList[this.idx],'number',data.car_number)
        },
        async getList() { 
            try { 
                const { data : res } = await this.$api.Car.getUserCarList({ 
                    userId: localStorage.userid
                })
                if(res.code) return Toast(res.msg)
                this.list = res.result
            }catch(e) { 
                console.log(e);
            }
        },
        cheliang() { 
            this.show3 = true
        }
    },
    mounted() { 
        this.getCar(this.$route.params.data.area_id)
        this.user = this.$route.params.data
        this.id = localStorage.userid
        this.getInfo()
        this.money = Number(this.$route.params.data.appoint_price)
        this.formateDate()
        this.getList()
        console.log(this.user);
    }
}
</script>

<style lang="scss" scoped>
$blue: #2d8cf0;
$fontColor: #323233;
#home {
  height: 100%;
  width: 100%;
  font-size: 0.28rem;
}
.home-search {
  background: $blue !important;
  
}
.bgc{ 
    background: #fff;
    padding: 10px;
    
    margin-top: 10px;
}
.btn{
    display: flex;
    justify-content: flex-end;
}
.popup{
  width: 100%;
  margin: auto;
}
.van-radio-group{
  display: flex;
  height: 1rem;
  justify-content: flex-start;
  align-items: center;
  span{
    margin-left: .3rem;
  }
}
.van-radio{
  margin-right: .3rem;
}
.list-box{ 
    padding: 10px;
    .box{
        border: 1px solid #eee;
        background: #fff;
        border-radius: 16px;
        margin-top: 15px;
        display: flex;
        font-size: 14px;
        padding: 10px;
        align-items: center;
        .number{ 
            color: #2d8cf0;
        }
        .yellow{ 
            color: rgb(223, 223, 135);
        }
        .red{ 
            color: rgb(226, 87, 87);
        }
        .green{ 
            color: green;
        }
    }
    .box1{ 
        background: #eee;
        border: 1px solid #eee;
        border-radius: 16px;
        margin-top: 15px;
        display: flex;
        font-size: 14px;
        padding: 10px;
        align-items: center;
    }
}
.flex-sp-center{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-sp-center1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #eee;
}
</style>